<template>
  <el-form ref="ruleFormRef" :rules="rules" :model="form" label-position="right" label-width="90px">
    <el-form-item label="标题名称:" required prop="title">
      <el-input v-model="form.title" />
    </el-form-item>
    <el-form-item label="主题:" required prop="topic">
      <el-input v-model="form.topic" />
    </el-form-item>
    <el-form-item label="资讯类型:" required prop="type">
      <selectOptionDick
        v-model="form.type"
        :options="store.state.system.allSystemDict.infoDict.XTGL_NEWS_TYPE"
        @changeValue="getTypeName"
      ></selectOptionDick>
    </el-form-item>
    <el-form-item label="所属公司:" required prop="parentName">
      <popup-tree-input
        placeholder="点击选择所属公司"
        :props="deptTreeProps"
        :data="store.state.system.orgList"
        :prop="form.parentName"
        :current-change-handle="handleOrgList"
      />
    </el-form-item>
    <el-form-item label="来源:" required prop="source">
      <el-input v-model="form.source" />
    </el-form-item>
    <el-form-item label="状态:">
      <el-switch
        v-model="form.status"
        active-text="正常"
        inactive-text="关闭"
        active-value="1"
        inactive-value="0"
        @change="swicthEnable()"
      />
    </el-form-item>
    <el-form-item label="资讯内容:" required prop="content">
      <!-- <div style="border: 1px solid #dcdfe6; width: 100%; border-radius: 4px">
        <toolbar
          style="border-bottom: 1px solid #dcdfe6; width: 100%; border-radius: 4px"
          :editor="editorRef"
          :default-config="toolbarConfig"
          mode="default"
        />
        <editor
          v-model="form.content"
          style="height: 300px; overflow-y: hidden"
          :default-config="editorConfig"
          mode="default"
          @onCreated="onCreated"
        />
      </div> -->
      <el-input v-model="form.content" :rows="5" type="textarea" />
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
import { ElMessage } from 'element-plus'
import { nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue'
import { useStore } from 'vuex'
import selectOptionDick from '@/views/project/components/selectOptionDick/index.vue'
import PopupTreeInput from '@/views/system/components/PopupTreeInput/index.vue'
// import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// import '@wangeditor/editor/dist/css/style.css'

export default {
  components: {
    // Editor,
    // Toolbar,
    PopupTreeInput,
    selectOptionDick,
  },
  setup() {
    const deptTreeProps = {
      label: 'name',
      children: 'children',
    }
    const store = useStore()
    const ruleFormRef = ref()
    // 内容 HTML
    const valueHtml = ref('<p>hello</p>')
    const rules = reactive({
      title: { required: true, message: '该字段必填' },
      topic: { required: true, message: '该字段必填' },
      type: { required: true, message: '该字段必填' },
      parentName: { required: true, message: '该字段必填' },
      source: { required: true, message: '该字段必填' },
      content: { required: true, message: '该字段必填' },
    })
    const form = store.state.system.newsForm
    form.createBy = JSON.parse(localStorage.getItem('userInfo') as any)?.cname
    // 富文本实例对象
    const editorRef = shallowRef()
    // 菜单配置
    const toolbarConfig = ref({})
    // 编辑器配置
    const editorConfig = ref({
      placeholder: '请输入内容...',
      readOnly: false, // 只读
      MENU_CONF: {
        // 配置上传图片
        uploadImage: {
          server: 'http://111.198.10.15:21409/minio/file/upload', // 配置图片上传地址
          maxFileSize: 2 * 1024 * 1024, // 10M  图片大小限制
          fieldName: 'multipartFile', // 上传名字
          allowedFileTypes: [], // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
          // 上传进度的回调函数，可以用来显示进度条
          onProgress(progress: any) {
            // progress 是 0-100 的数字
            console.log('progress', progress)
          },

          // 单个文件上传失败
          onFailed(file: any, res: any) {
            console.log(`${file.name} 上传失败`, res)
          },

          // 上传错误，或者触发 timeout 超时
          onError(file: any, err: any, res: any) {
            console.log(`${file.name} 上传出错`, err, res)
          },
        },
        // 配置上传视频
        uploadVideo: {
          server: 'http://111.198.10.15:21409/minio/file/upload', // 配置视频上传地址
          maxFileSize: 5 * 1024 * 1024, // 5M  视频大小限制
          fieldName: 'multipartFile', // 上传名字
          // 最多可上传几个文件，默认为 5
          // maxNumberOfFiles: 1,
          allowedFileTypes: [], // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []

          onBeforeUpload(file: any) {
            // file 选中的文件，格式如 { key: file }
            return file
          },

          // 上传进度的回调函数，可以用来显示进度条
          onProgress(progress: any) {
            // progress 是 0-100 的数字
            console.log('progress', progress)
          },

          // // 单个文件上传成功之后
          onSuccess(file: any, res: any) {
            console.log(`${file.name} 上传成功`, res)
          },

          // 单个文件上传失败
          onFailed(file: any, res: any) {
            console.log(`${file.name} 上传失败`, res)
          },

          // 上传错误，或者触发 timeout 超时
          onError(file: any, err: any, res: any) {
            console.log(`${file.name} 上传出错`, err, res)
          },
        },
      },
    })
    const onCreated = (editor: any) => {
      editorRef.value = editor
      nextTick(() => {
        editorRef.value = editor // 一定要用 Object.seal() ，否则会报错
      })
    }
    //资讯类型修改
    const getTypeName = (item) => {
      console.log(item, 'getTypeName')
      form.type = item.itemValue
      form.typeName = item.itemText
    }
    //所属单位修改
    const handleOrgList = (item) => {
      console.log(item, 'handleOrgList')
      form.parentName = item.name
    }
    const submitForm = () => {
      let result = {}
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          result = true
        } else {
          ElMessage({
            message: '请将基本信息补充完整',
            type: 'warning',
          })
          result = false
        }
      })
      return result
    }
    const swicthEnable = () => {
      console.log('swicthEnable')
    }
    onBeforeUnmount(() => {
      console.log('卸载了')
      console.log(store.state.system.newsForm)
      console.log(form)
      for (let key in form) {
        form[key] = ''
      }
      // const editor = editorRef.value
      // if (editor == null) return
      // editor.destroy()
    })
    return {
      deptTreeProps,
      store,
      ruleFormRef,
      form,
      rules,
      editorRef,
      toolbarConfig,
      editorConfig,
      onCreated,
      getTypeName,
      handleOrgList,
      submitForm,
      swicthEnable,
      valueHtml,
      mode: 'default', // 或 'simple'
    }
  },
}
</script>
<style lang="scss" scoped>
.demo-form-inline .el-form-item {
  width: 30%;
}
</style>
